<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>API Playground</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .graphiql-container {
    border-radius: 0px !important;
    height: 100vh !important;
  }

  #snackbar {
    visibility: hidden;
    min-width: 150px;
    margin-left: -125px;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    z-index: 1;
    left: 70%;  
    font-size: 18px;
    background-color: red;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  #snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }

  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
  }

  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }

  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
  }

  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
</style>
<body>
  <div id="snackbar">Something went wrong, please pass appropriate headers.</div>
  <div id="root">
  </div>
  <script src="{{.PathPrefix}}/playground.js"> </script>
  <script>

    // Start - Show Error Snackbar
    window.showError = () => {
      let snackBar = document.getElementById("snackbar");
      snackBar.classList.add("show");
      setTimeout(() => snackBar.classList.remove("show"), 3000);
    };
    // End - Show Error Snackbar

    const url = window.location.origin + "{{.Url}}";
    const GraphiQlInitInstance = new window.GraphiqlInit({
      containerId: 'root',
      schemaUrls: [{url}],
      onSubscriptionError: window.showError
    });
  </script>
</html>